<template>
<div>
	<!-- 顶部导航栏 -->
	<van-nav-bar title="我的收藏" left-arrow @click-left="$router.go(-1)" />
	<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
		<div class="container" id="app">
			<ul class="list_ul">
				<li class="list-item " v-for="(item,index) in list" data-type="0" :key="index" @click="oNnewsList(item.articleId)">
					<div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" >
						<div class="fl new-box">
							<span class="new-span">{{item.title}}</span>
							<div class="new-data">
							<div class="fl data">{{item.updateDate}}</div>
							</div>
						</div>
						<div class="fr list-img">
							<img :src="item.funImg" alt="">
						</div>

					</div>
					<div class="delete" @click.stop="deleteItem(item,index)" :data-index="index">删除</div>
				</li>
			</ul>
		</div>
	</van-list>
</div>
</template>
<script>
import apiHttp from '../../../../api/index'
import { Toast,Dialog } from 'vant';
export default {
	data() {
		return {
			list: [],
			startX: 0,
			endX: 0,
			page:0,
			pageSize:10,
			userId:sessionStorage.getItem('userId'),
			loading: false,
			finished: false,
			total:-1,
		}
	},
	methods: {
		onLoad(){
			if(this.list.length == this.total){
				this.finished  = true
        this.loading = false 
			}else{
				this.page++
				this.getCollectList()
			}
			
		},
		// 点击列表进入详情
		oNnewsList(id){
			this.$router.push({path:"/details/details",query: { id: id}});
		},
		// 收藏列表
		getCollectList(){
			let parmes = {
				page:this.page,
				pageSize:this.pageSize,
				userId:this.userId
			}
			apiHttp.comIndex.getCollectList(parmes,resp=>{
				if(resp.resultCode == '000000'){
					this.total = resp.data.total
					for(let i = 0; i < resp.data.collectList.length; i++){
						this.list.push(resp.data.collectList[i])
					}
					this.loading = false
				}
			})
		},
		//滑动开始
		touchStart(e) {
			// 记录初始位置
			this.startX = e.touches[0].clientX;
		},
		//滑动结束
		touchEnd(e) {
			// 当前滑动的父级元素
			let parentElement = e.currentTarget.parentElement;
			// 记录结束位置
			this.endX = e.changedTouches[0].clientX;
			// 左滑
			if(parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
				this.restSlide();
				parentElement.dataset.type = 1;
			}
			// 右滑
			if(parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
				this.restSlide();
				parentElement.dataset.type = 0;
			}
        this.startX = 0;
        this.endX = 0;
		},
		//判断当前是否有滑块处于滑动状态
		checkSlide() {
			let listItems = document.querySelectorAll('.list-item');
			for(let i = 0; i < listItems.length; i++) {
				if(listItems[i].dataset.type == 1 ) {
					return true;
				}
			}
			return false;
		},
		//复位滑动状态
		restSlide() {
			let listItems = document.querySelectorAll('.list-item');
			// 复位
			for(let i = 0; i < listItems.length; i++) {
				listItems[i].dataset.type = 0;
			}
		},
		//删除
		deleteItem(item,index) {
			let self = this
			Dialog.confirm({
				message: '您确定要删除吗？'
			}).then(() => {
				let parmes = {
					userId:self.userId,
					collectId:item.id
				}
				apiHttp.comIndex.deleteCollectt(parmes,resp=>{
					if(resp.resultCode == '000000'){
						// 复位
						self.restSlide()
						// 删除
						self.list.splice(index, 1)
						Toast('删除成功')
					}
				})
			}).catch(() => {
				self.restSlide()
			});
			
		}
	}
}
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	
	.list_ul {
		list-style: none;
		overflow: hidden;
	}
	
	.page-title {
		text-align: center;
		font-size: 0.85rem;
		padding: 0.5rem 0.75rem;
		position: relative;
	}
	
	.list-item {
    position: relative;
    width: 95%;
	  margin: 0.5rem auto;
    background: #ffffff;
    padding: 0.5rem;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(86, 31, 34, 0.3);
    box-shadow: 0px 0px 12px 0px rgba(86, 31, 34, 0.3);
    border-radius: 4px;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
	}
	
	.list-item[data-type="0"] {
		transform: translate3d(0, 0, 0);
	}
	
	.list-item[data-type="1"] {
		transform: translate3d(-3rem, 0, 0);
	}
	
	.list-box {
		/* padding: 0.5rem; */
		background: #fff;
		display: flex;
		align-items: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		justify-content: flex-end;
		font-size: 0;
	}
	
	.list-item .list-img {
		width: 4.5rem;
    height: 4rem;
	}
	.list-img img{
    width: 100%;
    height: 100%;
    border-radius: 0.2rem;
  }

	.new-box{
    width: 63%;
    margin-right: 0.5rem;
  }
  .new-data{
    width: 78%;
    margin-top: 1rem;
  }
  .new-span{
    height: 1.6rem;
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 0.8rem;
  }
  .data{
    font-size: 0.6rem;
    color: #999999;
    margin-top: 0.2rem;
  }
	.list-item .title {
		display: block;
		color: #333;
		overflow: hidden;
		font-size: 0.75rem;
		font-weight: bold;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.list-item .tips {
		display: block;
		overflow: hidden;
		font-size: 0.6rem;
		color: #999;
		line-height: 1rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.list-item .time {
		display: block;
		font-size: 0.6rem;
		position: absolute;
		right: 0;
		top: 0.25rem;
		color: #666;
	}
	
	.list-item .delete {
		border-radius: 7px;
    font-size: 0.6rem;
    width: 2rem;
    height: 5rem;
    background: #ff4949;
    font-size: 0.65rem;
    color: #fff;
    text-align: center;
    line-height: 5rem;
    position: absolute;
    top: 0;
    right: -2.4rem;
	}
</style>